<template>
    <div class="functBox">
        <ul class="funct">
            <li  @click="mv_all"> 
                <i class="iconfont icon-xinxi i_one"  ></i>
                <p>明星访谈</p>
            </li>
            <li  @click="mv_all"> 
                <i class="iconfont icon-huifang i_two" ></i>
                <p>直播回放</p>
            </li>
            <li  @click="mv_all"> 
                <i class="iconfont icon-fenlei i_three"></i>
                <p>分类</p>
            </li>
            <li  @click="mv_all">
                <i class="iconfont icon-zhibo i_four" ></i>
                <p>秀场直播</p>
            </li>
    </ul>
    </div>
    

</template>
<script>
export default {
  name: "funct",
  data() {
    return {};
  },
  methods: {
    mv_all() {
      this.$router.push("/Mv_list_all");
    }
  }
};
</script>
<style lang='scss' scoped>
html,
body {
  width: 100%;
  height: 100%;
}
.functBox {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 0 5%;
  box-sizing: border-box;
  .funct {
    margin: 0 auto;
    width: 100%;
    text-align: center;
    overflow: hidden;
    padding: 0.5rem 0;
    box-sizing: border-box;
    li {
      float: left;
      width: 25%;
      text-align: center;
      i {
        font-size: 1.1rem;
      }
      .i_one {
        color: #fb803a;
      }
      .i_two {
        color: #49cfe5;
      }
      .i_three {
        color: #fcc028;
      }
      .i_four {
        color: #9796ed;
      }
      p {
        font-size: 10px;
        margin-top: 0.3rem;
      }
    }
  }
}
</style>
